<template>
  <div id="app" :style="style">
    <el-card class="box-card">
      <div class="box_top">
        <h1>同城鲜花配送系统后台</h1>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="帐号：" prop="username">
          <el-input onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                    v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password"
                    onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                    v-model="ruleForm.password"/>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <div style="display: flex">
            <el-input type="text"
                      onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                      v-model="ruleForm.code"></el-input>
            <div class="login-code">
              <img :src="codeUrl"
                   @click="getCode">
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: center">
        <el-button type="primary" id="loginBtn" @click="login()">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>

    import * as u from '@/util/util'
    import * as c from '@/util/config'

    export default {
        name: "login",
        data() {
            return {
                style: {
                  background: 'url(' + require('@/assets/loginBg.jpg') + ') repeat 0 0 transparent',
                  backgroundRepeat: 'no-repeat',   //不重复
                  backgroundPosition: "center",
                  width: "100%",
                  height: "100%",
                  backgroundSize: "100%",
                },
                ruleForm: {
                    username: 'admin',
                    password: '123456',
                    code: '',
                    randomStr: u.uuid(),
                },
                rules: {
                    username: [
                        {required: true, message: '请输入帐号', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ],
                },
                //验证码图片url
                codeUrl: "",

            }

        },
        created() {
            this.getCode();
        },
        methods: {
            //获取验证码
            getCode() {
                this.$HttpService.get("/sys-login/getCode", {
                    randomStr: this.ruleForm.randomStr,
                }).then(res => {
                    this.codeUrl = res;
                    this.randomStr = u.uuid();
                })
            },
            //登录
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$HttpService.reqForm({
                            url: "/login",
                            method: "post",
                            data: this.ruleForm,
                        }).then(res => {
                            //切换路由
                            //设置存储用户基本信息
                            window.sessionStorage.setItem(c.sessionKey.TOKEN, res.token);
                            this.$util.setSession(c.sessionKey.USER_INFO, res.userInfo);
                            this.$util.setSession(c.sessionKey.SYS_MENU_TREE, res.userInfo.sysMenus);
                            this.$util.setSession(c.sessionKey.SYS_PERMISSIONS, res.userInfo.permissions);
                            //跳转路由
                            this.$router.push('/admin')
                        }).catch(() => {
                            this.getCode();
                        })
                    }
                });

            }


        }
    }
</script>

<style scoped>
  #app {
    width: 100%;
    height: 100%;
    background-size: 100%;
  }

  .box_top {
    text-align: center;
    padding: 30px;
  }

  .box-card {
    width: 500px;
    height: 450px;
    padding: 20px;
    margin: 0 auto;
    margin-top: 50px;

  }

</style>
